import * as React from 'react';
import { Card, Input, Button, Form, Select }  from 'antd'
import { IconLogo, IconQR, BgLogin } from '../../assets';
import QRCode from 'qrcode'
import classnames from 'classnames'
import QueueAnim from 'rc-queue-anim';
import style from './index.less';
import {history} from '../../Utils'

class Page extends React.Component {
    state = {
        isLogin: false,
        type: 1,
        qr: '',
        username: '',
        password: '',
        error: false
    }
    login = () => {
        console.log('login')
        if (!this.state.username) {
            this.setState({
                error: true,
            }, () => {
                setTimeout(() => {
                    this.setState({
                        error: false
                    })
                }, 1000)
            })
        } else {
            this.setState({
                isLogin: true
            })
            history.push('/receive')
        }
        
    }
    componentDidMount () {
        QRCode.toDataURL('hello', {width: 200, margin:0})
        .then(url => {
            this.setState({
                qr: url
            })
        })
        .catch(err => {
            console.error(err)
        })
    }
    public render () {
        if (this.state.isLogin) return this.props.children
        return (
            <div style={{height: '100vh', background: `url(${BgLogin}) no-repeat center`, backgroundSize: 'cover'}}>
                <Card
                    key={1}
                    className={style.loginCard}
                    bordered={false}
                    headStyle= {{ borderBottom: 'none', padding: 44, height: 514}}
                    title={
                        <div>
                            <img src={IconLogo} className={style.logo} />
                            {
                                this.state.type === 0 && <Form>
                                    <Form.Item className={style.input} >
                                        <Input placeholder="支持邮箱/手机号登录" value ={this.state.username}  onChange={(e)=> { this.setState({username: e.target.value})}}/>
                                    </Form.Item>
                                    <Form.Item className={style.input}>
                                        <Input.Password  placeholder="密码" type="password" visibilityToggle= {true}  value ={this.state.password} onChange={(e)=> { this.setState({password: e.target.value})}} />
                                    </Form.Item>
                                    <Form.Item>
                                        <a onClick={() =>{ this.setState({
                                            type: 1
                                        })}}>手机验证码登录</a>
                                    </Form.Item>
                                    <Form.Item>
                                        <Button type="primary" style={{width: "100%"}} className={classnames(style.submitBtn, this.state.error && style.error)} onClick={this.login} >登录</Button>
                                    </Form.Item>
                                </Form>
                            }
                            {
                                this.state.type === 1 && <Form>
                                <Form.Item className={style.input} >
                                    <Input placeholder="手机号"  
                                        value={this.state.username}
                                        onChange={(e)=> { this.setState({username: e.target.value})}}
                                        addonBefore={
                                            <Select defaultValue="+86" style={{ width: 90 }}>
                                            <Select.Option value="+86">+86 <small>中国</small> </Select.Option>
                                            <Select.Option value="Https://">+86 <small>中国</small> </Select.Option>
                                        </Select>
                                        }
                                    />
                                </Form.Item>
                                <Form.Item className={style.input}>
                                    <Input 
                                       placeholder="六位手机验证码"
                                       suffix={<a>获取验证码</a>} 
                                    />
                                </Form.Item>
                                <Form.Item>
                                    <a onClick={() => {this.setState({type: 0})}}>邮箱登录</a>
                                </Form.Item>
                                <Form.Item>
                                <Button type="primary" style={{width: "100%"}} className={classnames(style.submitBtn, this.state.error && style.error)} onClick={this.login} >登录</Button>
                                </Form.Item>
                            </Form>
                            }
                            {
                                this.state.type === 2 && <div style={{textAlign: 'center'}}>
                                    <img src ={this.state.qr}  style={{padding:5, border: '1px dashed #cbcbcb',borderRadius: 5, display: 'block', margin: '20px auto'}} />
                                    <span style={{background: '#EAEAEA',borderRadius: 15, padding:'5px 20px', color:'#666', fontWeight:'normal', fontSize: 14}}>请使用手机版Xmail扫码登录</span>
                                </div>

                            }
                        </div>
                    }
                    bodyStyle={{padding: "0px 44px 22px"}}
                >
                <div style={{textAlign: "right", fontSize: 16}}>
                    {
                        this.state.type === 2 ? 
                        <div style={{ display: 'flex', justifyContent: 'space-between'}}>
                            <a onClick={() => {this.setState({type: 0})}}>手机验证码登录</a>
                            <a onClick={() => {this.setState({type: 0})}}>密码登录</a>
                        </div>
                        :
                        <a style={{color: "#ABB2C2", fontSize: 16}} onClick={() => {this.setState({type: 2})}}><img  src ={IconQR} style={{marginRight: 10}} />扫码登录</a>
                    }
                    
                </div>
                <Button type="primary" style={{border: "none", height: 44, width: 452, background: "#ABB2C2", margin: '100px -44px 0', fontSize: 16}}> 下载Xmail APP </Button>
                </Card>
            </div>
        )
    }
}
export default Page;